<template>
<div>
    <h2>微博热搜榜</h2>
    <el-table :data="dataShow"  :key="index">
        <el-table-column type="index" :index="indexMethod" label="序号" width="100px">
        <!-- <template scope="scope">
            <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
        </template> -->
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="hot" label="热度"></el-table-column>
        <!-- <el-table-column prop="url" label="链接"></el-table-column> -->
    </el-table>

    <!-- <el-card v-for="(wb_new,index) in dataShow" :key="index">
        <p>{{wb_new.title}}<span> || </span>{{wb_new.hot}}</p>
    </el-card> -->

    <!-- 分页区域 -->
    <el-pagination 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page="currentPage" 
        :page-sizes="[1,2,5,10]" 
        :page-size="pageSize" 
        layout="total,sizes,prev,pager,next,jumper" 
        :total=totalNum>
    </el-pagination>
</div>
</template>

<script>
export default {
    name: 'Welcome',
    data() {
        return {
            //后台传过来的数据
            news: [],

            //所有页面的数据
            totalPage:[],

            //当前页面显示内容
            dataShow:[],

            //总共多少条数据
            totalNum:0,

            //当前页数
            currentPage: 1,

            //当前每页显示多少条数据
            pageSize: 10,
        }
    },
    //生命周期函数
    mounted() {
        this.getNews()
    },

    methods: {
        //返回序号
        indexMethod(index){
            console.log(index);
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        //异步获取热搜内容
        async getNews() {
            const { data: res } = await this.$http.get('https://res.abeim.cn/api-weibo_hot')
            if (res.code !== 200) return this.$message.error(res.code)
            this.news = res.data
            this.totalNum=res.data.length
            // console.log(res)
            // console.log(res.data.length);
        },

        //改变每页显示的数量
        handleSizeChange(newsize) {
            // console.log(newsize);
            this.pageSize = newsize;
            // console.log(this.pageSize);
        },

        //改变当前页
        handleCurrentChange(currentPage) {
            this.currentPage=currentPage
            // console.log(this.currentPage);
            //总共有多少页
            // console.log(totalPageNum);
            const totalPageNum=this.totalNum/this.pageSize

            for(let i=0; i<totalPageNum; i++){
                this.totalPage[i]=this.news.slice(this.pageSize*i, this.pageSize*(i+1))
                // console.log(this.totalPage[i]);
            }
            this.dataShow = this.totalPage[this.currentPage-1];//从0开始
            console.log(this.dataShow);
        },
    },


}
</script>

<style scoped>
h2 {
    text-align: center;
    padding: 0.5rem 0;
}

.el-pagination{
    position: fixed;
    bottom: 0;
    left: 30%;
}
</style>
